<template>
    <show-modal :title="title" :loading="loading" width="500px" @cancel="cancel" :isSumbit="false">
        <!--图片-->
        <div v-if="imgShow">
            <img :src="downloadUrl" />
        </div>
        <!--doc，excel-->
        <div v-else-if="docShow || excelShow">
            <iframe
                class="child"
                frameborder="0"
                :src="'https://view.officeapps.live.com/op/view.aspx?src=' + this.downloadUrl"
                :style="{ width: width, height: height }"
            >
            </iframe>
        </div>
        <!--视频-->
        <div v-else-if="videoShow">
            <video preload="auto" :height="height" :width="width" align="center" controls="true">
                <source :src="downloadUrl" type="video/mp4" />
            </video>
        </div>
        <!--其他不能预览的-->
        <div v-else-if="otherShow"></div>
    </show-modal>
</template>
<script>
export default {
    props: { file: {} },
    data() {
        return {
            title:'预览文件',
            loading:false,
            fileName: '',
            downloadUrl: '',
            imgShow: false,
            docShow: false,
            excelShow: false,
            videoShow: false,
            //其他不能预览的
            otherShow: false,
            height: window.innerHeight + 'px',
            width: '100%',
        };
    },
    created() {
        this.fileName = this.file.fileType; // 文件名称（包括后缀名）
        this.downloadUrl = this.file.fileUrl; // 文件路径
        //.png, .jpeg, .jpg,
        // application/pdf, .txt, .xls, .xlsx, .doc, .docx,.ppt, .pptx,
        //.wps, .rtf,.pps, .ppsx,.mp4,.mp3,
        //.zip
        if (this.fileName.endsWith('png') || this.fileName.endsWith('jpg') || this.fileName.endsWith('jpeg')) {
            //图片
            this.imgShow = true;
        } else if (
            this.fileName.endsWith('docx') ||
            this.fileName.endsWith('doc') ||
            this.fileName.endsWith('pdf') ||
            this.fileName.endsWith('pptx') ||
            this.fileName.endsWith('ppt') ||
            this.fileName.endsWith('txt')
        ) {
            //doc
            this.docShow = true;
        } else if (this.fileName.endsWith('xlsx') || this.fileName.endsWith('xls')) {
            //excel
            this.excelShow = true;
        } else if (this.fileName.endsWith('mp4') || this.fileName.endsWith('mp3')) {
            this.videoShow = true;
        } else {
            this.otherShow = true;
        }
    },
    methods:{
        cancel(){
            this.$emit('cancel')
        }
    }
};
</script>
<style scoped>
.child {
    width: 100%;
    height: 100%;
    border: 0;
}
</style>
